const n = `
<template>
  <s-form label-width="10em" colon="：">
    <s-form-item label="文本域主题">
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="文本排列方向">
      <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否无边框">
      <s-radio-group v-model="options.borderless" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否限制长度">
      <s-radio-group v-model="options.maxlength" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否只读">
      <s-radio-group v-model="options.readonly" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否禁用">
      <s-radio-group v-model="options.disabled" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="文本域示例">
      <s-textarea
        v-model="options.value"
        placeholder="请输入内容"
        :rows="4"
        :maxlength="options.maxlength ? 100 : undefined"
        :theme="options.theme"
        :align="options.align"
        :borderless="options.borderless"
        :readonly="options.readonly"
        :disabled="options.disabled"
      ></s-textarea>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  TEXT_ALIGN_DEFAULT,
  TEXT_ALIGN_LABEL,
  TEXT_ALIGN_OPTIONS,
  TEXTAREA_THEME_DEFAULT,
  TEXTAREA_THEME_LABEL,
  TEXTAREA_THEME_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultTextarea extends Vue {
  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = TEXTAREA_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: TEXTAREA_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 排列方向列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = TEXT_ALIGN_OPTIONS.map((align) => ({
    value: align,
    label: TEXT_ALIGN_LABEL.get(align),
  }));

  /**
   * @description: 是否列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly isOrNotList = [
    { value: true, label: "是" },
    { value: false, label: "否" },
  ];

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    value: null, // 文本内容
    theme: TEXTAREA_THEME_DEFAULT, // 文本域主题
    align: TEXT_ALIGN_DEFAULT, // 文本排列方向
    borderless: false, // 是否不显示边框
    maxlength: true, // 是否有最大输入限制
    readonly: false, // 是否只读
    disabled: false, // 是否禁用
  };
}
<\/script>
`; export { n as default };
